<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="container">
        <div class="inp">
            <input type="text" placeholder="chokcoco">
        </div>
        <div class="pan">
            <div class="left_contianer">
                <ul class="list">
                    <li class="item" code="Escape">Esc</li>
                    <li class="item none" code="Escape"></li>
                    <li class="item" code="F1">F1</li>
                    <li class="item" code="F2">F2</li>
                    <li class="item" code="F3">F3</li>
                    <li class="item" code="F4">F4</li>
                    <li class="item none small"></li>
                    <li class="item" code="F5">F5</li>
                    <li class="item" code="F6">F6</li>
                    <li class="item" code="F7">F7</li>
                    <li class="item" code="F8">F8</li>
                    <li class="item none small"></li>
                    <li class="item" code="F9">F9</li>
                    <li class="item" code="F10">F10</li>
                    <li class="item" code="F11">F11</li>
                    <li class="item" code="F12">F12</li>
                </ul>
                <ul class="list">
                    <li class="item db" code="Backquote">
                        <div>~</div>
                        <div>`</div>
                    </li>
                    <li class="item db" code="Digit1">
                        <div>!</div>
                        <div>1</div>
                    </li>
                    <li class="item db" code="Digit2">
                        <div>@</div>
                        <div>2</div>
                    </li>
                    <li class="item db" code="Digit3">
                        <div>#</div>
                        <div>3</div>
                    </li>
                    <li class="item db" code="Digit4">
                        <div>$</div>
                        <div>4</div>
                    </li>
                    <li class="item db" code="Digit5">
                        <div>%</div>
                        <div>5</div>
                    </li>
                    <li class="item db" code="Digit6">
                        <div>^</div>
                        <div>6</div>
                    </li>
                    <li class="item db" code="Digit7">
                        <div>&</div>
                        <div>7</div>
                    </li>
                    <li class="item db" code="Digit8">
                        <div>*</div>
                        <div>8</div>
                    </li>
                    <li class="item db" code="Digit9">
                        <div>(</div>
                        <div>9</div>
                    </li>
                    <li class="item db" code="Digit0">
                        <div>)</div>
                        <div>0</div>
                    </li>
                    <li class="item db" code="Minus">
                        <div>一</div>
                        <div>-</div>
                    </li>
                    <li class="item db" code="Equal">
                        <div>+</div>
                        <div>=</div>
                    </li>
                    <li class="item last" code="Backspace">←</li>
                </ul>
                <ul class="list">
                    <li class="item" code="Tab">Tab= </li>
                    <li class="item" code="KeyQ">Q</li>
                    <li class="item" code="KeyW">W</li>
                    <li class="item" code="KeyE">E</li>
                    <li class="item" code="KeyR">R</li>
                    <li class="item" code="KeyT">T</li>
                    <li class="item" code="KeyY">Y</li>
                    <li class="item" code="KeyU">U</li>
                    <li class="item" code="KeyI">I</li>
                    <li class="item" code="KeyO">O</li>
                    <li class="item" code="KeyP">P</li>
                    <li class="item db" code="BracketLeft">
                        <div>{</div>
                        <div>[</div>
                    </li>
                    <li class="item db" code="BracketRight">
                        <div>}</div>
                        <div>]</div>
                    </li>
                    <li class="item last" code="Backslash">
                        <div>|</div>
                        <div>\</div>
                    </li>
                </ul>
                <ul class="list">
                    <li class="item" code="CapsLock">Caps Lock</li>
                    <li class="item" code="KeyA">A</li>
                    <li class="item" code="KeyS">S</li>
                    <li class="item" code="KeyD">D</li>
                    <li class="item" code="KeyF">F</li>
                    <li class="item" code="KeyG">G</li>
                    <li class="item" code="KeyH">H</li>
                    <li class="item" code="KeyJ">J</li>
                    <li class="item" code="KeyK">K</li>
                    <li class="item" code="KeyL">L</li>
                    <li class="item db" code="Semicolon">
                        <div>:</div>
                        <div>;</div>
                    </li>
                    <li class="item db" code="Quote">
                        <div>"</div>
                        <div>'</div>
                    </li>
                    <li class="item last" code="Enter">Enter</li>
                </ul>
                <ul class="list">
                    <li class="item last" code="ShiftLeft">↑Shift</li>
                    <li class="item" code="KeyZ">Z</li>
                    <li class="item" code="KeyX">X</li>
                    <li class="item" code="KeyC">C</li>
                    <li class="item" code="KeyV">V</li>
                    <li class="item" code="KeyB">B</li>
                    <li class="item" code="KeyN">N</li>
                    <li class="item" code="KeyM">M</li>
                    <li class="item db" code="Comma">
                        <div>&lt</div>
                        <div>,</div>
                    </li>
                    <li class="item db" code="Period">
                        <div>&gt</div>
                        <div>.</div>
                    </li>
                    <li class="item db" code="Slash">
                        <div>?</div>
                        <div>/</div>
                    </li>
                    <li class="item last" code="ShiftRight">↑Shift</li>
                </ul>
                <ul class="list">
                    <li class="item" code="ControlLeft">Ctrl</li>
                    <li class="item" code="MetaLeft">Win</li>
                    <li class="item" code="AltLeft">Alt</li>
                    <li class="item last" code="Space"></li>
                    <li class="item" code="AltRight">Alt</li>
                    <li class="item" code="MetaRight">Win</li>
                    <li class="item" code="ContextMenu">Menu</li>
                    <li class="item" code="ControlRight">Ctrl</li>
                </ul>
            </div>
            <div class="middle_contianer">
                <ul class="list">
                    <li class="item db">
                        <div>Prtsc</div>
                        <div>Sysrq</div>
                    </li>
                    <li class="item db" code="ScrollLock">
                        <div>Scroll</div>
                        <div>Look</div>
                    </li>
                    <li class="item db" code="Pause">
                        <div>Pause</div>
                        <div>Break</div>
                    </li>
                </ul>
                <ul class="list">
                    <li class="item" code="Insert">Insert</li>
                    <li class="item" code="Home">Home</li>
                    <li class="item db" code="PageUp">
                        <div>Page</div>
                        <div>Up</div>
                    </li>
                </ul>
                <ul class="list">
                    <li class="item" code="Delete">Delete</li>
                    <li class="item" code="End">End</li>
                    <li class="item db" code="PageDown">
                        <div>Page</div>
                        <div>Down</div>
                    </li>
                </ul>
                <ul class="list">
                    <li class="item none"></li>
                </ul>
                <ul class="list">
                    <li class="item" code="ArrowUp">^</li>
                </ul>
                <ul class="list">
                    <li class="item" code="ArrowLeft">&lt</li>
                    <li class="item" code="ArrowDown">v</li>
                    <li class="item" code="ArrowRight">&gt</li>
                </ul>
            </div>
            <div class="right_contianer">
                <ul class="list"><li class="item none"></li></ul>
                <ul class="list">
                    <li class="item db" code="NumLock">
                        <div>Num</div>
                        <div>Lock</div>
                    </li>
                    <li class="item" code="NumpadDivide">/</li>
                    <li class="item" code="NumpadMultiply">*</li>
                    <li class="item" code="NumpadSubtract">-</li>
                </ul>
                <div class="wraper">
                    <div class="lt">
                        <ul class="list">
                            <li class="item db" code="Numpad7">
                                <div>7</div>
                                <div>Home</div>
                            </li>
                            <li class="item db" code="Numpad8">
                                <div>8</div>
                                <div>^</div>
                            </li>
                            <li class="item db" code="Numpad9">
                                <div>9</div>
                                <div>PgUp</div>
                            </li>
                        </ul>
                        <ul class="list">
                            <li class="item db" code="Numpad4">
                                <div>4</div>
                                <div>&lt</div>
                            </li>
                            <li class="item" code="Numpad5">5</li>
                            <li class="item db" code="Numpad6">
                                <div>6</div>
                                <div>&gt</div>
                            </li>
                        </ul>
                        <ul class="list">
                            <li class="item db" code="Numpad1">
                                <div>1</div>
                                <div>End</div>
                            </li>
                            <li class="item db" code="Numpad2">
                                <div>2</div>
                                <div>v</div>
                            </li>
                            <li class="item db" code="Numpad3">
                                <div>3</div>
                                <div>PgDn</div>
                            </li>
                        </ul>
                        <ul class="list">
                            <li class="item db last" code="Numpad0">
                                <div>0</div>
                                <div>INs</div>
                            </li>
                            <li class="item db" code="NumpadDecimal">
                                <div>.</div>
                                <div>Del</div>
                            </li>
                        </ul>
                    </div>
                    <div class="rt">
                        <div class="item last" code="NumpadAdd">+</div>
                        <div class="item last" code="NumpadEnter">Enter</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        const ELEMENT_LIST = {}
        const eles = document.querySelectorAll('.item[code]')
        eles.forEach(item => {
            ELEMENT_LIST[item.getAttribute('code')] = item
        })



        document.querySelector('input').addEventListener('keydown', function(e){
            console.log(e);
            // 防止没有code报错
            if(!e.code) return
            if(!ELEMENT_LIST[e.code].className.includes('active')){
                ELEMENT_LIST[e.code].className = `${ELEMENT_LIST[e.code].className} active`
            }

        })


        document.addEventListener('keyup', function(e){
            // 防止没有code报错
            if(!e.code) return
            ELEMENT_LIST[e.code].className = ELEMENT_LIST[e.code].className.replace('active', '')
        })
    </script>
</body>
</html>